<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner></github-corner> -->

    <panel-group @handleSetLineChartData="handleSetLineChartData" :data="getData.total"></panel-group>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>





  </div>
</template>

<script>
// import GithubCorner from "@/components/GithubCorner";
import PanelGroup from "./components/PanelGroup";
import LineChart from "./components/LineChart";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import { getTJday } from "@/api/user";

const lineChartData = {
  default: {
    regData: [0, 0, 0, 0, 0, 0, 0],
    clickData: [0, 0, 0, 0, 0, 0, 0],
    shareData: [0, 0, 0, 0, 0, 0, 0]
  },
  reg: {
    regData: [100, 120, 161, 134, 105, 160, 165]
  },
  clickCount: {
    clickData: [200, 192, 120, 144, 160, 130, 140]
  },
  shareCount: {
    shareData: [80, 100, 121, 104, 105, 90, 100]
  }
};

export default {
  name: "dashboard-admin",
  components: {
    // GithubCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
    // TransactionTable,
    // TodoList,
    // BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.default,
      getData: {
        clickC: [],
        regC: [],
        shareC: []
      }
    };
  },
  methods: {
    handleSetLineChartData(type) {
      //this.lineChartData = lineChartData[type];
      switch (type) {
        case "reg":
          this.lineChartData.regData = this.getData.regC;
          this.lineChartData.clickData = [];
          this.lineChartData.shareData = [];
          break;
        case "clickCount":
          this.lineChartData.clickData = this.getData.clickC;
          this.lineChartData.regData = [];
          this.lineChartData.shareData = [];
          break;
        case "shareCount":
          this.lineChartData.shareData = this.getData.shareC;
          this.lineChartData.clickData = [];
          this.lineChartData.regData = [];
          break;
        default:
          this.lineChartData.regData = this.getData.regC;
          this.lineChartData.clickData = this.getData.clickC;
          this.lineChartData.shareData = this.getData.shareC;
          break;
      }
      //console.log(type, this.lineChartData, this.getData);
    }
  },
  mounted() {
    this.$nextTick(() => {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      getTJday({ l: 7 }).then(res => {
        loading.close();
        //console.log(res);
        this.getData = res.data;
        this.lineChartData.regData = this.getData.regC;
        this.lineChartData.clickData = this.getData.clickC;
        this.lineChartData.shareData = this.getData.shareC;

        console.log(this.getData.total);
      });
    });
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px 10px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
